<template>
  <div>
    <el-container style="height: 100vh;">
      <el-header style="border-bottom: 1px solid #aaa;">
        <div class="header-left">
          <img src="@/assets/img/logo-repair.png">
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-icon>
                <User/>
              </el-icon> {{name}}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <el-aside width="250px" style="background-color: #f0f2f5;">

          <el-menu :default-active="activeIndex" router @select="handleSelect">
            <div class="menu-container">
            <el-menu-item index="1-1" @click="navigateTo('/repair-list-admin')">
              <el-icon><Histogram /></el-icon>
              订单管理
            </el-menu-item>
            <el-menu-item index="1-2" @click="navigateTo('/notice-admin')">
              <el-icon><Postcard /></el-icon>
              公告管理
            </el-menu-item>
            <el-menu-item index="2-1" @click="navigateTo('/repair-worker')">
              <el-icon><User /></el-icon>
              人员管理
            </el-menu-item>
            <el-menu-item index="3-1" @click="navigateTo('/repair-area-code')">
              <el-icon><Location /></el-icon>
              区域管理
            </el-menu-item>
            <el-menu-item index="3-2" @click="navigateTo('/repair-category')">
              <el-icon><Tools /></el-icon>
              类别管理
            </el-menu-item>
            <el-menu-item index="3-3" @click="navigateTo('/housing-material')">
              <el-icon><Briefcase /></el-icon>
              材料管理
            </el-menu-item>
            </div>
          </el-menu>

        </el-aside>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import {User} from '@element-plus/icons-vue';


const router = useRouter();
const activeIndex = ref('1');
const name=localStorage.getItem('userName');

const navigateTo = (path) => {
  router.push(path);
};

const handleSelect = (index) => {
  activeIndex.value = index;
};

const handleLogout = () => {
  ElMessage.success('退出登录成功');
  // 这里写退出登录逻辑，例如清空 token，跳转到登录页等
  localStorage.clear()
  router.push('/AdminLogin');
};
</script>

<style scoped>
.header-left {
  display: flex;
  align-items: center;
  font-size: 25px;
  color: #000;
}

.header-right {
  display: flex;
  justify-content: flex-end; /* 将内容移到最右边 */
  align-items: center;
  color: #000;
}

.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #FFF;
  color: #000;
  padding: 0 20px;
}

.menu-container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  width: 100%;
  height: 100%;
}
.menu-title {
  text-align: center; /* 将一级菜单居中 */
}

.menu-title .el-menu-item {
  padding-left: 40px; /* 二级菜单右移 */
  text-align: left; /* 使二级菜单项左对齐 */
}

.el-main {
  padding: 20px;
  overflow-y: auto; /* 根据您的内容调整滚动条 */
  height: calc(100vh - 60px); /* 调整高度以适应视口 */
}

.el-container .el-aside {
  overflow-y: auto; /* 显示滚动条 */
  max-height: 100vh; /* 确保内容不会超出视口高度 */
}
</style>
